import http from '@/utils/http';
import type { MutationTree, ActionTree, GetterTree } from 'vuex'
import type { State } from '../index'

interface Infos {
  [index: string]: unknown
}

export interface UsersState {
  token: string
  infos: Infos
}
/**
 * 状态数据---所有的共享数据统一放到state中
 */
const state: UsersState = {
  // token信息
  token: '',
  // 用户信息
  infos: {}
};

/**
 * 提供方法更改state状态数据 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
 */
const mutations: MutationTree<UsersState> = {
  // 更改token信息
  updateToken(state, payload){
    state.token = payload;
  },
 // 更改用户信息
  updateInfos(state, payload){
    state.infos = payload;
  },
  // 清空token信息
  clearToken(state){
    state.token = '';
  }
};

/**
 * 类似于上面的mutations状态的异步操作 --- Actions和Mutations相似，一般情况下同步操作使用Mutations，异步操作使用Actions
 */
const actions: ActionTree<UsersState, State> = {
  // 调用登录接口
  login(context, payload){
    return http.post('/users/login', payload);
  },
  infos(){
    return http.get('/users/infos');
  }
};

// 类似于vue中的computed 计算属性，进行缓存，对于Store中的数据进行加工处理形成新的数据
const getters: GetterTree<UsersState, State> = {};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}